import {Button, Input, Form, message} from 'antd';
import { connect, FormattedMessage, formatMessage } from 'umi';
import React, { Component } from 'react';
import styles from './BaseView.less';
import {clearUser, updateUserInfo} from "@/pages/UserSet/service";
import {history} from "@@/core/history";

class PasswordView extends Component {

  constructor() {
    super();
    this.state = {}
  }

  view = undefined;

  componentDidMount() {

  }

  getViewDom = (ref) => {
    this.view = ref;
  };

  refreshUser() {
    const { dispatch } = this.props;
    dispatch({
      type: 'userSet/fetchCurrent',
    })
  };

  handleFinish = value => {
    if (value.newpassword && value.newpassword.length < 6){
      message.warning('密码长度应大于6位！');
      return;
    }
    if (value.newpassword && value.newpassword.length > 15){
      message.warning('密码长度应小于15位！');
      return;
    }
    updateUserInfo({...value}).then(res => {
      if (res.status == 200){
        this.refreshUser();
        message.success(formatMessage({
          id: 'userset.basic.updatePwd.success',
        })).then(() => {
          clearUser().then(res => {
            history.push('/user/login');
          })
        })
      }
    })
  };

  render() {
    const { currentUser } = this.props;
    return (
      <div className={styles.baseView} ref={this.getViewDom}>
        <div className={styles.left}>
          <Form
            layout="vertical"
            onFinish={this.handleFinish}
            initialValues={currentUser}
            hideRequiredMark
          >
            <Form.Item name="id">
              <Input hidden={true}/>
            </Form.Item>
            <Form.Item
              name="oldpassword"
              label={formatMessage({
                id: 'userset.basic.oldpwd',
              })}
              rules={[
                {
                  required: true,
                  message: formatMessage(
                    {
                      id: 'userset.basic.oldpwd-message',
                    },
                    {},
                  )
                },
              ]}
            >
              <Input.Password/>
            </Form.Item>
            <Form.Item
              name="newpassword"
              label={formatMessage({
                id: 'userset.basic.newpwd',
              })}
              rules={[
                {
                  required: true,
                  message: formatMessage(
                    {
                      id: 'userset.basic.newpwd-message',
                    },
                    {},
                  )
                },
              ]}
            >
              <Input.Password/>
            </Form.Item>
            <Form.Item>
              <Button htmlType="submit" type="primary">
                <FormattedMessage id="userset.basic.updatePwd" defaultMessage="Update Password" />
              </Button>
            </Form.Item>
          </Form>
        </div>
      </div>
    );
  }
}

export default connect(({ userSet }) => ({
  currentUser: userSet.currentUser,
}))(PasswordView);
